<template>
  <div class="search-suggest">
    <van-cell
      v-for="(suggest, index) in suggestions"
      :key="index"
      icon="search"
      @click="$emit('on-search',suggest)"
    >
      <!-- v-html：渲染html标签 -->
      <div slot="title" v-html="highlight(suggest)"></div>
    </van-cell>
  </div>
</template>

<script>
// 引入获取搜索建议接口
import { getSearchSuggestions } from '@/api/search'
// 引入js第三方包lodash的debounce（防抖）
import { debounce } from 'lodash'

export default {
  name: 'SearchSuggest',

  props: {
    // 父组件传参：搜索文本
    searchText: {
      type: String,
      required: true
    }
  },

  data () {
    return {
      suggestions: [] // 搜索建议
    }
  },

  computed: {},

  watch: {
    // 监听父组件输入框值的变化
    // 当searchText发生变化时，就会调用handler
    searchText: {
      // 注意：此方法在searchText每一次发生变化时，都会触发请求，浪费资源
      // 可使用第三方包lodash的debounce(防抖)方法
      // handler(searchText) {
      //   // 数据没发生变化，就调用获取搜索建议的方法
      //   this.loadSearchSuggestions(searchText);
      // },

      // debounce(防抖), 注意: 不要使用箭头函数，因为箭头函数本身没有this，
      // 内部this指向生成箭头函数的作用域
      // debounce(匿名函数(搜索文本){},毫秒X：表示搜索框停止更新X毫秒后再加载搜索建议)
      handler: debounce(function (searchText) {
        // 监听到文本变化，调用加载搜索建议方法，加载搜索建议
        this.loadSearchSuggestions(searchText)
        // console.log(searchText);
      }, 300),
      // 该回调将会在监听开始之后立刻执行，若不设置，第一次值的变化（还未渲染）不会被监听到
      immediate: true
    }
  },

  methods: {
    async loadSearchSuggestions (q) {
      try {
        const { data } = await getSearchSuggestions(q)
        // console.log("data", data);
        this.suggestions = data.data.options
      } catch (err) {
        this.$toast('数据加载失败')
      }
    },

    // 设置搜索建议关键字高亮
    highlight (suggest) {
      // 高亮关键字
      const keywords = `<span class="heightlight">${this.searchText}</span>`
      // 利用正则表达式从搜索建议词条中提取关键字
      // 注意：动态获取关键字，不能用正则字面量
      const reg = new RegExp(this.searchText, 'ig')
      // 将匹配到的关键字替换成一个html标签，在html页面中利用v-html渲染
      return suggest.replace(reg, keywords)
    }
  }
}
</script>

<style lang="less" scoped>
.search-suggest {
  /deep/ span.heightlight {
    color: red;
  }
}
</style>
